import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import {DateUtils} from '../../utils/Utils';
import Config from '../../config';
import BaseItem from '../common/BaseItem';
import TImage from '../../components/TImage';
import CommonStyles from '../../common/CommonStyles';

export default class HeartEapItemView extends BaseItem {
  constructor(props) {
    super(props);
    this.state.isResponeUpdate = false;
  }

  render(){
    return (
      <TouchableOpacity style={{flex:1,
          width:this._pageWidth - SizeUtils.translateDesignWidthToCode(80),
          paddingTop:SizeUtils.translateDesignHeightToCode(20),
          paddingBottom:SizeUtils.translateDesignHeightToCode(20),
          paddingLeft:SizeUtils.translateDesignWidthToCode(20),
          borderBottomColor:'#e3e3e3',
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
          paddingRight:SizeUtils.translateDesignWidthToCode(20),
          flexDirection:"row"}} onPress={this._onPressItem.bind(this)}>
        {this._renderContentItemImage(this.props.data)}
        {this._renderContentItemRight(this.props.data)}
      </TouchableOpacity>
      )
  }


  _onPressItem() {
    this.gotoPage(Config.pages.heart_eap_content, this.props.data);
  }

  _renderContentItemImage(data) {
    return(
        <TImage style={{width:200, height:140}} source={this._getImageSource(data)}
           showDefault={true}/>
    )
  }

  _getImageSource(data) {
    if(data.image_url) {
      return {uri:data.image_url};
    }
    else {
      return {uri:""};
    }
  }

  _renderContentItemRight(data) {
    return(
      <View style={{flex:1,
          marginLeft:SizeUtils.translateDesignWidthToCode(26)}}>
        {this._renderContentItemName(data)}
        {this._renderDate(data)}
      </View>
    )
  }


  //名字
  _renderContentItemName(data) {
    return(
      <View style={{}}>
        <Text numberOfLines={1} style={{fontSize:SizeUtils.translateFontSizeToCode(30), color:"#333333"}}>{data.title}</Text>
      </View>
    )
  }

  _renderDate(data) {
    return(
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(0)}}>
        <View>
          <Text
            style={[CommonStyles.secondaryText, {fontSize:SizeUtils.translateFontSizeToCode(28),
              paddingTop:SizeUtils.translateDesignHeightToCode(10)}]}>
                {this.props.data.title ? "开始时间: " + this._getTimeStr(this.props.data.begin_at) : ""}
          </Text>
          <Text
            style={[CommonStyles.secondaryText, {fontSize:SizeUtils.translateFontSizeToCode(28),
              paddingTop:SizeUtils.translateDesignHeightToCode(10)}]}>
                {this.props.data.title ? "结束时间: " + this._getTimeStr(this.props.data.end_at) : ""}
          </Text>
          <View style={{flexDirection:'row',justifyContent: 'flex-end',alignItems: 'center',}}>
            <TImage source={require("../../../resource/images/activity/persion.png")} 
              style={{marginLeft:5,width:40,height:30,}}/>
            <Text  style={[CommonStyles.secondaryText,{fontSize:SizeUtils.translateFontSizeToCode(28)}]}>
                {' '+this.props.data.applicants_num}
            </Text>
          </View>
        </View>
      </View>
    )
  }

    _getTimeStr(time) {
    var timeStr = DateUtils.formatActivity1(time)
    return timeStr;
  }
}
